<template>
    <view class="">
        <view class="body">
            <!-- 导航栏 -->
            <!-- <view class="top_block" :style="{'padding-top':StatusBar*2+20+'rpx','height': StatusBar*2+60+'rpx'}">
				<view class="navbar_wrap">
					<view class="navbar">
						<view class="left" @tap="navTo('back')">
							<image src="@/static/icon/p_039.png" mode="heightFix" class="arrow-right">
							</image>
						</view>
						<view class="title">

						</view>
						<view class="right"></view>
					</view>
				</view>
			</view> -->
            <u-toast ref="uToast"></u-toast>
            <view class="register flex-center-center">
                用户注册
            </view>
            <view class="reg">
                <view class="reg1" v-show="isShow">
                    <view>
                        <!-- <p>手机号</p> -->
                        <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
                        <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                            <u-form-item label="手机号" labelWidth="120px" prop="phoneNo" borderBottom ref="item1">
                                <u--input v-model="form.phoneNo" type="number" border="none" clearable
                                    placeholder-class="myplaceholder" placeholder="请输入手机号码" maxlength="11"></u--input>
                            </u-form-item>
                        </u--form>
                    </view>

                    <view class="mtop20">
                        <!-- <p>设置密码</p> -->
                        <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">

                            <u-form-item label="设置密码" labelWidth="120px" prop="pwd" borderBottom ref="item2"
                                style="display: flex;" v-if="isWechat=='mp-weixin'">
                                <u-input v-if="!showPass" border='none' v-model="form.password" type="password"
                                    placeholder="请设置密码(8~16位数字和字母组合)">
                                    <template slot="suffix">
                                        <view class="eye" @click="showPass = !showPass">
                                            <image class="pass-icon"
                                                :src="showPass?'/static/icon/p_022.png':'/static/icon/p_030.png'"
                                                mode="">
                                            </image>
                                        </view>

                                    </template>
                                </u-input>
                                <u-input v-else v-model="form.password" border='none' type="text"
                                    placeholder="请设置密码(8~16位数字和字母组合)">
                                    <template slot="suffix">
                                        <view class="eye" @click="showPass = !showPass">
                                            <image class="pass-icon"
                                                :src="showPass?'/static/icon/p_022.png':'/static/icon/p_030.png'"
                                                mode="">
                                            </image>
                                        </view>
                                    </template>
                                </u-input>
                            </u-form-item>


                            <u-form-item label="设置密码" labelWidth="120px" prop="password" borderBottom ref="item2"
                                v-else>
                                <view style="width:88%;">
                                    <u--input v-show="!showPass" type="password" class="uni-input"
                                        v-model="form.password" name="" placeholder="请设置密码(8~16位数字和字母组合)" border="none"
                                        clearable />
                                    <u--input v-show="showPass" type="text" class="uni-input" v-model="form.password"
                                        name="" placeholder="请设置密码(8~16位数字和字母组合)" border="none" clearable />
                                </view>
                                <view style="width:12%;">
                                    <image v-show="!showPass" src="/static/icon/p_030.png" mode="widthFix"
                                        style="width: 54rpx;vertical-align: middle;" @click="showPass = !showPass">
                                    </image>
                                    <image v-show="showPass" src="/static/icon/p_022.png" mode="widthFix"
                                        style="width: 54rpx;vertical-align: middle;" @click="showPass = !showPass">
                                    </image>
                                </view>
                            </u-form-item>


                        </u--form>
                    </view>

                    <view class="mtop20">
                        <!-- <p>再次设置密码</p> -->
                        <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                            <u-form-item label="再次设置密码" labelWidth="120px" prop="pwd" borderBottom ref="item2"
                                style="display: flex;" v-if="isWechat=='mp-weixin'">
                                <u-input v-if="!showPass1" border='none' v-model="form.passwd" type="password"
                                    placeholder="请设置密码(8~16位数字和字母组合)">
                                    <template slot="suffix">
                                        <view class="eye" @click="showPass1 = !showPass1">
                                            <image class="pass-icon"
                                                :src="showPass1?'/static/icon/p_022.png':'/static/icon/p_030.png'"
                                                mode="">
                                            </image>
                                        </view>

                                    </template>
                                </u-input>
                                <u-input v-else v-model="form.passwd" border='none' type="text"
                                    placeholder="请设置密码(8~16位数字和字母组合)">
                                    <template slot="suffix">
                                        <view class="eye" @click="showPass1 = !showPass1">
                                            <image class="pass-icon"
                                                :src="showPass1?'/static/icon/p_022.png':'/static/icon/p_030.png'"
                                                mode="">
                                            </image>
                                        </view>
                                    </template>
                                </u-input>
                            </u-form-item>


                            <u-form-item label="再次设置密码" labelWidth="120px" prop="password" borderBottom ref="item2"
                                v-else>
                                <view style="width:88%;">
                                    <u--input v-show="!showPass1" type="password" class="uni-input"
                                        v-model="form.passwd" name="" placeholder="请设置密码(8~16位数字和字母组合)" border="none"
                                        clearable />
                                    <u--input v-show="showPass1" type="text" class="uni-input" v-model="form.passwd"
                                        name="" placeholder="请设置密码(8~16位数字和字母组合)" border="none" clearable />
                                </view>
                                <view style="width:12%;">
                                    <image v-show="!showPass1" src="/static/icon/p_030.png" mode="widthFix"
                                        style="width: 54rpx;vertical-align: middle;" @click="showPass1 = !showPass1">
                                    </image>
                                    <image v-show="showPass1" src="/static/icon/p_022.png" mode="widthFix"
                                        style="width: 54rpx;vertical-align: middle;" @click="showPass1 = !showPass1">
                                    </image>
                                </view>
                            </u-form-item>

                        </u--form>
                    </view>

                </view>
                <view class="reg2" v-show="!isShow">
                    <view>
                        <!-- <p>姓名</p> -->
                        <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                            <u-form-item label="姓名" labelWidth="120px" prop="acctName" borderBottom ref="item1">
                                <u--input v-model="form.acctName" type="acctName" border="none" clearable
                                    placeholder-class="myplaceholder" placeholder="请输入与身份证一致姓名"></u--input>
                            </u-form-item>
                        </u--form>
                    </view>

                    <view class="mtop20">
                        <!-- <p>身份证号</p> -->
                        <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                            <u-form-item label="身份证号" labelWidth="120px" prop="acctIdNo" borderBottom ref="item2">
                                <u-input v-model="form.acctIdNo" type="acctIdNo" border="none" clearable
                                    placeholder="请输入身份证号码">
                                    <!-- <template slot="suffix">
                                        <view class="eye" @tap="getScanCode">
                                            <image class="pass-icon" src="/static/icon/p_006.png" mode=""></image>
                                        </view>

                                    </template> -->
                                </u-input>
                            </u-form-item>
                        </u--form>
                    </view>

                    <view class="mtop20">
                        <!-- <p>注册地址</p> -->
                        <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                            <!-- <u-form-item label="注册地址" labelWidth="120px" prop="region" borderBottom ref="item3">
                                <view class="item-box">
                                    <view class="input" @tap="chooseCity">
                                        {{form.region.label}}
                                    </view>
                                    <view class="right" @tap="getSite">
                                        <image src="/static/icon/p_011.png" mode=""></image>
                                    </view>
                                </view>
                            </u-form-item> -->
                            <u-form-item label="注册地址" labelWidth="120px" prop="address" borderBottom ref="item3">
                                <u-input v-model="form.address" type="address" border="none" clearable
                                    placeholder="请输入详细地址">
                                    <template slot="suffix">
                                        <view class="eye" @tap="getSite">
                                            <image class="pass-icon" src="/static/icon/p_011.png" mode=""></image>
                                        </view>
                                    </template>

                                </u-input>
                                <u-icon slot="right" acctName="edit-pen" size="26"></u-icon>
                            </u-form-item>
                        </u--form>
                    </view>
                </view>

                <view class="mtop30">
                    <u-button type="primary" color="#3182f4" shape="circle" :text="text"
                        @click="registerBtn()"></u-button>
                </view>
                <view class="mtop20 flex-center-center regTip">
                    <span @click="toLogin()">已有账号去登录</span>
                </view>

                <view class="mtop50 flex-center-center">
                    <u-radio-group v-model="radiovalue" style="justify-content: center; display: flex;">
                        <u-radio name="1" @change="radioChange">
                            <span style="font-size: 24rpx;">我已阅读并同意</span>
                            <p @click="goYs()" style="font-size: 24rpx;color:#3182f4;">《隐私协议》</p>
                            <p @click="goTk()" style="font-size: 24rpx;margin-left: -10rpx;color:#3182f4;">《使用条款》</p>
                        </u-radio>
                    </u-radio-group>
                </view>
            </view>

            <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue"
                @onConfirm="onConfirm"></mpvue-city-picker>
            <u-modal :show="showModal" title="注册信息再次确认" showCancelButton @confirm="againConfirm"
                @cancel="showModal = false">
                <view class="slot-content">
                    <text>手机号将设置为登录账号，请再次填写确保一致</text>
                    <view class="phone-box">
                        <text class="phone-text">手机号</text>
                        <u-input placeholder="请再次输入手机号" border="none" type="number" v-model="againPhone"></u-input>
                    </view>
                </view>
            </u-modal>
            <video id="video" autoplay playsinline style="display: none;"></video>
        </view>
    </view>

</template>


<script>
    import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
    import QRScanner from 'qr-scanner';
    // import 'qr-scanner/dist/main.css';
    import util from '@/common/utils'
    import validate from '@/common/validate.js'
    import {
        regUser
    } from '@/common/api.js'

    export default {
        components: {
            mpvueCityPicker,
        },
        data() {
            return {
                showPass: false, //是否显示密码
                showPass1: false, //是否显示密码
                isWechat: uni.getSystemInfoSync().uniPlatform,
                radiovalue: '2',
                scanner: null,
                video: null,
                isShow: true,
                cityPickerValue: [0, 0, 1],
                themeColor: '#007AFF',
                form: {
                    phoneNo: '',
                    password: '',
                    passwd: '',
                    address: '',
                    acctIdNo: '',
                    acctName: '',
                    acctAddress: '',
                    region: {
                        label: "",
                        value: [],
                        cityCode: ""
                    },
                },
                text: '下一步',
                rules: {
                    'phoneNo': [{
                        type: 'number',
                        required: true,
                        message: '请填写电话号码',
                        trigger: ['blur', 'change']
                    }, {
                        validator: (rule, value, callback) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        // 触发器可以同时用blur和change
                        trigger: ['change', 'blur'],
                    }],
                    'password': [{
                        type: 'string',
                        required: true,
                        message: '密码长度请限制8～16位数字和字母',
                        min: 8,
                        max: 16,
                        trigger: ['blur', 'change'],

                    }, ],
                    'passwd': {
                        type: 'string',
                        required: true,
                        message: '请再次填写相同密码',
                        trigger: ['blur', 'change']
                    },
                    'acctName': {
                        type: 'string',
                        required: true,
                        message: '请输入姓名',
                        trigger: ['blur', 'change']
                    },

                },
                showModal: false,
                againPhone: ''

            };
        },
        methods: {
            goYs() {
                uni.navigateTo({
                    url: '/pages/user/terms',
                })
            },
            goTk() {
                uni.navigateTo({
                    url: '/pages/user/protocol'
                })
            },
            radioChange(n) {
                this.radiovalue = n
                console.log(this.radiovalue);
            },

            // 扫一扫
            getScanCode() {
                // #ifdef !H5
                uni.scanCode({
                    success: function(res) {
                        console.log('条码类型：' + res.scanType);
                        console.log('条码内容：' + res.result);
                    }
                });
                // #endif

                // #ifdef H5
                console.log('我是H5平台');
                this.initScanner()
                // #endif
            },
            async initScanner() {
                const video = document.getElementById('video');
                this.scanner = new QRScanner(video, (result) => {
                    console.log('Scanned:', result);

                });

                try {
                    await this.scanner.start();
                } catch (error) {
                    console.error('Error starting scanner:', error);
                }
            },
            // 获取当前定位
            getSite() {
                let that = this
                uni.chooseLocation({
                    success: function(res) {
                        console.log('位置名称：' + res.name);
                        console.log('详细地址：' + res.address);
                        console.log('纬度：' + res.latitude);
                        console.log('经度：' + res.longitude);
                        that.form.address = res.address
                    }
                });
            },
            inputPassword() {

            },
            toLogin() {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            },
            navTo(value) {
                if (!value) {
                    return
                }
                if (value == 'back') {
                    uni.navigateBack()
                    return
                }
                uni.navigateTo({
                    url: value
                });
            },
            registerBtn() {
                if (this.isShow) {
                    if (this.radiovalue !== '1') {
                        this.$u.toast('请先阅读并同意协议和条款')
                        return;
                    }
                    if (!this.$u.test.mobile(this.form.phoneNo)) {
                        this.$u.toast('请输入正确的手机号码')
                        return;
                    }


                    if (!validate.checkPassword(this.form.password)) {
                        uni.showToast({
                            title: '密码需大于8位且包含数字和字母',
                            icon: 'none'
                        });
                        return;
                    }


                    if (this.form.password !== this.form.passwd) {
                        this.$u.toast('请确认两个密码是否一致')
                        return;
                    } else {
                        this.showModal = true
                        this.isShow = !this.isShow
                        // this.text = "注册"
                    }



                } else {
                    if (!util.validIdCard(this.form.acctIdNo)) {
                        this.$u.toast('请输入正确的身份证号码')
                        return;
                    }
                    this.form.acctAddress = this.form.region.label + this.form.address
                    if (this.form.acctAddress.length === 1) {
                        this.$u.toast('请输入注册地址')
                        return;
                    }

                    if (this.againPhone.length !== 11) {
                        this.showModal = true
                        return;
                    }

                    regUser(this.form).then((res) => {
                        if (res.status === 200 || res.status === 0) {
                            this.$refs.uToast.show({
                                message: '注册成功,即将跳转到登录页面',
                                complete() {
                                    uni.navigateTo({
                                        url: '/pages/login/login'
                                    })
                                }
                            })
                        }

                    })
                }

            },
            againConfirm() {
                if (!this.$u.test.mobile(this.againPhone)) {
                    this.$u.toast('请输入正确的手机号码')
                } else if (this.againPhone !== this.form.phoneNo) {
                    this.$u.toast('请确认两次输入手机号是否一致')
                    return;
                } else {
                    this.showModal = false;
                    this.isShow = false
                    this.text = "注册"
                }
            },
            onCancel(e) {
                console.log(e)
            },
            chooseCity() {
                this.$refs.mpvueCityPicker.show()
            },
            onConfirm(e) {
                this.form.region.label = e.label;
                this.cityPickerValue = e.value;
                console.log(e);
            },

        },
        onReady() {
            //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
            this.$refs.uForm.setRules(this.rules)
        },
    };
</script>

<style lang="scss" scoped>
    .body {
        width: 92%;
        padding: 0 4%;

        .navbar_wrap {
            width: 100%;
            color: $u-main-color;

            .navbar {
                position: relative;
                display: flex;
                align-items: center;
                width: 100%;
                height: 88rpx;


                .title {
                    flex: 1;
                    text-align: center;
                    font-size: 36rpx;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    color: $u-main-color;
                }

                .right {
                    flex-shrink: 0;
                    position: absolute;
                    right: 30rpx;

                    image {
                        width: 34rpx;
                        height: 40rpx;
                    }
                }

                .left {
                    position: absolute;

                    .arrow-right {
                        transform: rotate(0deg);
                        height: 44rpx;
                        padding-right: 20rpx;
                    }
                }
            }
        }

        .eye {
            padding: 0 20rpx;

            .pass-icon {
                width: 36rpx;
                height: 36rpx;
            }
        }

        .item-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            .input {
                flex: 1;
            }

            .right {
                padding: 0 20rpx;
                padding-left: 50rpx;

                image {
                    width: 36rpx;
                    height: 36rpx;
                }
            }
        }

        .register {
            margin-top: 20rpx;
            height: 300rpx;
            width: 100%;
            font-weight: 600;
            font-size: 40rpx;

            .logo {
                width: 150rpx;
                height: 150rpx;
                border-radius: 20rpx;
            }

        }

        .reg {
            .regTip {
                span {
                    font-size: 24rpx;
                    color: #3182f4;
                    padding: 10rpx;
                }
            }
        }

        .phone-box {
            display: flex;
            align-items: center;
            margin-top: 30rpx;
            height: 80rpx;
            border-radius: 16rpx;
            background-color: $uni-bg-color-grey;
            box-sizing: border-box;
            padding: 10rpx 18rpx;
            font-size: 28rpx;

            .phone-text {
                padding-right: 20rpx;
                border-right: 1px solid #666;
                margin-right: 20rpx;
            }
        }
    }
</style>